<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色、字体、边框的使用</title>
    <style>
        .item1{
            width: 800px;
            height: 200px;
            background-color: aqua;
            border-top:red solid 3px;
            border-bottom:yellowgreen dashed 3px;
            border-left:hotpink dotted 3px;
            border-right: yellow dotted 3px;
            border-radius: 12px;
        }
        .fonts {
            color: darkred;
            font-size: 15px;
            font-family: 宋体;
            font-style: normal;
            font-weight: bold;
            line-height: 30px;
            text-decoration: none;
            text-indent: 24px;
            text-align: left;
        }
        .box{
            width:300px;
            height: 400px;
            boder:red dashed 3px;
            box-shadow:10px 20px 30px 40px darkred;
            /*background-color: yellowgreen;*/
            background-image: url(../images/五年级.jpg);
            background-size:100% 100% ;

        }
        .box:hover{
            box-shadow: 10px 10px 10px 10px #ccc;
        }

    </style>
</head>
<body>
    <div class="item1" align="center">颜色的使用</div>
    <div class="fonts" >
        pcolor 设置文字的颜色，如： color:red;<br>
        font-size 设置文字的大小，如：font-size:12px;<br>
        font-family 设置文字的字体，如：font-family:'微软雅黑';<br>
        font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜 <br>
        font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 <br>

        line-height 设置文字的行高，如：line-height:24px; <br>
        text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 <br>
        text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px <br>
        text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中 <br>
    </div>
    <div class="box"  align="center">阴影的使用</div>
</body>
</html>